<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
  <meta name="screen-orientation" content="portrait" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <meta name="full-screen" content="yes">
  <meta name="x5-fullscreen" content="true">
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>


  <title>支付</title>
</head>

<body onload="pay()">

  <div id="concation">
    <div style="flex:1">
      <div style="padding:20px;text-align:left">
        <div class="cell">
          <input type="hidden" name="token" id="token" value="%s" />
        </div>
      </div>


      <div style="padding:20px;text-align:left">
        <div class="cell">
          <input type="hidden" name="userId" id="userId" value="%s" />
        </div>
      </div>



      <div style="padding:20px;text-align:left">
        <div class="cell">
          <input type="hidden" name="openId" id="openId" value="%s" />
        </div>
      </div>


      <div style="padding:20px;text-align:left">
        <div class="cell">
          <input type="hidden" name="body" id="body" value="%s" />
        </div>
      </div>


      <div style="padding:20px;text-align:left">
        <div class="cell">
          <input type="hidden" name="outTradeNo" id="outTradeNo" value="%s" />
        </div>
      </div>



      <div style="padding:20px;text-align:left">
        <div class="cell">
          <input type="hidden" name="totalFee" id="totalFee" value="%s" />
        </div>
      </div>

      <div style="padding:20px;text-align:left">
        <div class="cell">
          <input type="hidden" name="timeStamp" id="timeStamp" value="%s" />
        </div>
      </div>
      <div style="padding:20px;text-align:left">
        <div class="cell">
          <input type="hidden" name="nonceStr" id="nonceStr" value="%s" />
        </div>
      </div>
      <div style="padding:20px;text-align:left">
        <div class="cell">
          <input type="hidden" name="package" id="package" value="%s" />
        </div>
      </div>


      <div style="margin:40px 20px;display:flex">

      </div>
    </div>
  </div>

  <script>

    function pay() {
      let storage = window.localStorage;
      let timeStamp = $('#timeStamp')[0].value
      let nonceStr = $('#nonceStr')[0].value
      let package = $('#package')[0].value

      wx.config({
        appId: storage.appId, // 必填，公众号的唯一标识
        timestamp: timeStamp, // 必填，生成签名的时间戳
        nonceStr: nonceStr, // 必填，生成签名的随机串
        signature: package,// 必填，签名
        jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
      });
      wx.ready(function () {
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        let token = $('#token')[0].value
        let userId = $('#userId')[0].value
        let openId = $('#openId')[0].value
        let body = $('#body')[0].value
        let outTradeNo = $('#outTradeNo')[0].value
        let totalFee = $('#totalFee')[0].value

        $(document).ready(function () {
          $.post("https://api-merchant.nanxinwang.com/bizapi/wechat/pay/public",
            {
              token: token,
              userId: userId,
              openId: openId,
              body　: body　,
              outTradeNo: outTradeNo,
              totalFee: totalFee
            },
            function (res, status) {
              wx.chooseWXPay({
                timestamp: res.data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                nonceStr: res.data.nonceStr, // 支付签名随机串，不长于 32 位
                package: res.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                signType: res.data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                paySign: res.data.paySign, // 支付签名
                success: function (res) {
                 
                  // 支付成功后的回调函数
                  window.history.go(-1)
                },   cancel() {
                window.history.go(-1)
              },
              error(res) {
                window.history.go(-1)
              }
              });
            });
        });

      });

    }
  </script>

</body>
<style>